<template>
  <div class="dowebok-body" @keyup.13="login">
    <div class="dowebok">
      <div class="logo"></div>
      <div class="form-item">
        <input id="username" type="text" autocomplete="off" placeholder="账号" v-model="user.mix" />
      </div>
      <div class="form-item">
        <input id="password" type="password" autocomplete="off" placeholder="登录密码" v-model="user.password" @keyup.13="login" />
      </div>
      <div class="form-item">
        <input id="password" type="password" autocomplete="off" placeholder="确认密码" v-model="user.repassword" @keyup.13="login" />
      </div>
      <div class="form-item"><button id="submit" @click="register">登 录</button></div>
    </div>
  </div>
</template>
<script>
export default {
  name: 'register',
  title: '注册',
  data() {
    return {
      user: {
        mix: '',
        password: '',
        repassword: ''
      }
    }
  },
  methods: {
    register() {
      // 注册逻辑
      this.$router.replace({ name: 'login' })
    }
  }
}
</script>
<style lang="css">
.dowebok-body {
  height: 100vh;
  background: #fff url(../../assets/backgroud.jpg) 50% 50% no-repeat;
  background-size: cover;
}
.dowebok {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 430px;
  height: 600px;
  margin: -300px 0 0 -215px;
  border: 1px solid #fff;
  border-radius: 20px;
  overflow: hidden;
}
.logo {
  width: 104px;
  height: 104px;
  margin: 50px auto 80px;
  background: url(../../assets/login.png) 0 0 no-repeat;
}
.form-item {
  position: relative;
  width: 360px;
  margin: 0 auto;
  padding-bottom: 30px;
}
.form-item input {
  width: 100%;
  height: 48px;
  padding-left: 70px;
  border: 1px solid #fff;
  border-radius: 25px;
  font-size: 18px;
  color: #fff;
  background-color: transparent;
  outline: none;
}
.form-item button {
  width: 360px;
  height: 50px;
  border: 0;
  border-radius: 25px;
  font-size: 18px;
  color: #1f6f4a;
  outline: none;
  cursor: pointer;
  background-color: #fff;
}
#username {
  background: url(../../assets/account.png) 18px 6px no-repeat;
}
#password {
  background: url(../../assets/password.png) 23px 11px no-repeat;
}
.tip {
  display: none;
  position: absolute;
  left: 20px;
  top: 52px;
  font-size: 14px;
  color: #f50;
}
.reg-bar {
  width: 360px;
  margin: 20px auto 0;
  font-size: 14px;
  overflow: hidden;
}
.reg-bar a {
  color: #fff;
  text-decoration: none;
}
.reg-bar a:hover {
  text-decoration: underline;
}
.reg-bar .reg {
  float: left;
}
.reg-bar .forget {
  float: right;
}
.dowebok ::-webkit-input-placeholder {
  font-size: 18px;
  line-height: 1.4;
  color: #fff;
}
.dowebok :-moz-placeholder {
  font-size: 18px;
  line-height: 1.4;
  color: #fff;
}
.dowebok ::-moz-placeholder {
  font-size: 18px;
  line-height: 1.4;
  color: #fff;
}
.dowebok :-ms-input-placeholder {
  font-size: 18px;
  line-height: 1.4;
  color: #fff;
}

@media screen and (max-width: 500px) {
  * {
    box-sizing: border-box;
  }
  .dowebok {
    position: static;
    width: auto;
    height: auto;
    margin: 0 30px;
    border: 0;
    border-radius: 0;
  }
  .logo {
    margin: 50px auto;
  }
  .form-item {
    width: auto;
  }
  .form-item input,
  .form-item button,
  .reg-bar {
    width: 100%;
  }
}
</style>
